<template>
  <div>
    <el-dialog :visible.sync="dialogFormVisible" :title="title">
      <el-form>
        <el-form-item :label-width="formLabelWidth" label="课时标题">
          <el-input v-model="video.title" auto-complete="off"/>
        </el-form-item>
        <!-- 上传视频的组件 -->
        <el-form-item :label-width="formLabelWidth" label="课时视频">
          <el-upload
            ref="upload"
            :auto-upload="false"
            :on-error="hanldeUploadError"
            :on-success="handleUploadVideoSuccess"
            :action="uploadPath"
            :on-change="handleVideosChange"
            name="video"
            class="upload-demo">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传视频文件，且不超过200mb</div>
          </el-upload>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="课时排序">
          <el-input-number v-model="video.sort" :min="0" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="是否免费">
          <el-radio v-model="video.free" :label="1">是</el-radio>
          <el-radio v-model="video.free" :label="0">否</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button :disabled="flag" type="primary" @click="handleSaveOrUpdateVideo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import videoApi from '@/api/video'
export default {
  data() {
    return {
      flag: false,
      video: { free: 0, sort: 0 },
      dialogFormVisible: false,
      title: '添加课时',
      formLabelWidth: '120px',
      uploadPath: process.env.BASE_API + '/admin/vod/upload'
    }
  },
  methods: {

    // 上传成功的回调事件
    handleUploadVideoSuccess(response, file) { // file代表本地选中的上传的文件对象
      console.log(file)
      if (response.success) {
        this.$message.success('视频上传成功')
        // video代表课时对象，返回的是视频的资源id，将id设置给video的视频资源id
        this.video.videoSourceId = response.data.id
        console.log(this.video.videoSourceId)
        this.video.videoOriginalName = file.name // 设置视频文件名
      } else {
        this.$message.error(response.message)
      }
      // 清空上传的文件列表
      this.$refs.upload.clearFiles()
      // 取消按钮禁用
      this.flag = false
    },
    // 上传组件的提交事件函数
    submitUpload() {
      this.$refs.upload.submit()// 调用上传组件的提交文件方法
    },

    // 上传失败回调
    hanldeUploadError() {
      this.$message.error('网络连接失败')
      // 清空上传的文件列表
      this.$refs.upload.clearFiles()
      // 取消按钮禁用
      this.flag = false
    },

    // 上传组件选择文件状态改变时的回调
    handleVideosChange(file, fileList) {
      if (fileList && fileList.length > 0) {
        // 设置提交按钮禁用
        this.flag = true
      }
    },

    // 根据要更新的课时id查询课时对象回显
    getVideo(id) {
      videoApi.getById(id).then(r => {
        this.video = r.data.item
        this.video.free = r.data.item.free ? 1 : 0
        // 弹出对话框
        this.dialogFormVisible = true
        console.log(this.video)
      })
    },
    handleSaveOrUpdateVideo() {
      if (this.video.id) {
        this.update()
      } else {
        this.save()
      }
    },
    // 更新课时
    update() {
      videoApi.updateById(this.video).then(r => {
        this.$message.success('更新课时成功')
        // 关闭对话框
        this.dialogFormVisible = false
        // 刷新页面章节课时嵌套集合
        this.$parent.getChaptersAndVideos()
      })
    },
    // 新增课时
    save() {
      videoApi.save(this.video).then(r => {
        this.$message.success('新增课时成功')
        // 关闭对话框
        this.dialogFormVisible = false
        // 刷新页面章节课时嵌套集合
        this.$parent.getChaptersAndVideos()
      })
    }
  }
}
</script>
